<template>
  <el-dialog v-model="dialogVisible" title="个人信息" width="500px" draggable>
    <div style="text-align: center" v-if="phone">
      <el-image
        src="https://img0.baidu.com/it/u=105047212,1695180139&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
        style="width: 80px; margin-right: 30px; vertical-align: middle; border: 1px solid #cccccc; border-radius: 100%"
      ></el-image>
      <div class="info-content" style="text-align: left">
        <span>
          <p>姓名：{{ username }}</p>
          <p>手机：{{ phone }}</p>
          <p>公司：{{ company }}</p>
          <p>主岗：{{ roleName }}</p>
          <p>辅岗：{{ company }}</p>
        </span>
      </div>
    </div>
    <div v-else style="text-align: center">
      <el-image
        src="https://img0.baidu.com/it/u=105047212,1695180139&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
        style="width: 80px; margin-right: 30px; vertical-align: middle; border: 1px solid #cccccc; border-radius: 100%"
      ></el-image>
      <div class="info-content" style="text-align: left">
        <span>
          <p>账号：{{ username }}<el-button type="primary" link @click="router.push('/loginRest')">修改密码</el-button></p>
          <p>公司：{{ company }}</p>
        </span>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">退出登录</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const dialogVisible = ref(false);
const openDialog = () => {
  dialogVisible.value = true;
};
const username = JSON.parse(localStorage.getItem("userInfo") as string).userName;
const company = JSON.parse(localStorage.getItem("userInfo") as string).roleName;
const phone = JSON.parse(localStorage.getItem("userInfo") as string).phonenumber;
const roleName = JSON.parse(localStorage.getItem("userInfo") as string).roleName;

defineExpose({ openDialog });
</script>
<style>
.info-content {
  display: inline-block;
  vertical-align: middle;
}
</style>
